	<link href='http://seowario.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
	<link rel="stylesheet" type="text/css" href="main.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script src="jquery-ui.custom.js"></script>
	<link rel="stylesheet" href="jquery-ui.css" media="screen">	
	<script type="text/javascript" src="jscolor.js"></script>
	<link href="font.css" rel="stylesheet" type="text/css">
	<script src="fontPreview.js"></script>
	<script src="values.js" gapi_processed="true"></script>
	
<style type="text/css">#demo {
  font-family: georgia, serif;
  font-size: 14px;
  color: #000000;
  font-style: normal;
  font-weight: bold;
  font-variant: small-caps;
  text-align: left;
  letter-spacing: -1.5px;
  line-height: 21px;
}
</style></head>
<body class="wide" data-twttr-rendered="true">
	<div class="layout">
		
		
		
		
		<div class="main">
			<div class="container">
				<div class="row">
					<div class="span12">
						<!-- Content -->
						<div class="content">
							<!-- Single Page -->
								<section class="page">
									
									
									
									 


	<div class="row-fluid">
		<div class="span6">
			<div class="examples">
			<div class="topic">Font Preview</div>					
			  <div id="demo">
			    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus mi tristique ante imperdiet gravida. Fusce nulla lorem, accumsan vel lobortis vitae, rutrum et leo. Aliquam sapien leo, aliquet eu eleifend quis, elementum id turpis. Nunc purus massa, convallis ut faucibus id, varius vitae libero. Cras tempor lacinia massa, sit amet commodo ligula suscipit ut. Proin sagittis vulputate pharetra. Mauris felis lorem, dictum non sollicitudin vitae, dictum sit amet risus. In hac habitasse platea dictumst. Curabitur ac varius elit. Quisque vulputate, augue vel mollis porta, risus orci molestie orci, ac porttitor lorem leo quis elit. Donec eget metus vitae purus imperdiet fermentum. Quisque velit dolor, scelerisque et porta sit amet, mattis aliquet odio.
			  </div> 
		  </div>
			<div class="examples">
			<div class="topic">CSS Code</div>  
			   <pre class="prettyprint linenums" id="css-view">#demo {
  font-family: georgia, serif;
  font-size: 14px;
  color: #000000;
  font-style: normal;
  font-weight: bold;
  font-variant: small-caps;
  text-align: left;
  letter-spacing: -1.5px;
  line-height: 21px;
}
</pre>
			</div>         
     	</div>

		<div class="span6">

		<div class="examples">
		<div class="topic">Font Settings</div>
          	<p>Font Name: 
          		<select id="fontname" class="fontname" name="fontname" onchange="updateFont()">
					<option value="courier, &quot;courier new&quot;, monospace">Courier</option>
					<option value="georgia, serif">Georgia</option>
					<option value="&quot;palatino linotype&quot;, palatino, serif">Palatino</option>
					<option value="&quot;times new roman&quot;, times, serif">Times New Roman</option>
					<option value="arial, sans-serif">Arial</option>
					<option value="helvetica, sans-serif">Helvetica</option>
					<option value="impact, sans-serif">Impact</option>	
					<option value="&quot;lucida sans unicode&quot;, &quot;lucida grande&quot;, sans-serif">Lucida Sans</option>
					<option value="&quot;Tahoma&quot;, &quot;Geneva&quot;, sans-serif">Tahoma</option>	
					<option value="&quot;trebuchet MS&quot;, sans-serif">Trebuchet MS</option>
					<option value="&quot;Gill Sans&quot;, &quot;Gill Sans MT&quot;, sans-serif">Gill Sans</option>
					<option value="verdana, sans-serif" selected="">Verdana</option>
				</select>&nbsp;&nbsp;Font Color: 
          		<input class="color {hash:true}" id="font-color" value="#000000" type="text" onchange="updateFont()" style="width: 65px; background-image: none; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);" autocomplete="off"></p>
          	<p>Font Size: 
          		<strong class="text-info"><span id="size-value">14</span>px</strong>
          	</p>
          		<div id="slider_size-value" class="slider size ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 44.44444444444444%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 44.44444444444444%;"></a></div>
          	<p>Font Style: 
          		<select id="fontstyle" class="fontstyle" name="fontstyle" onchange="updateFont()">
					<option value="normal">Normal</option>
					<option value="italic">Italic</option>
					<option value="oblique">Oblique</option>
				</select></p>   	
          	<p>Font Weight: 
          		<select id="fontweight" class="fontweight" name="fontweight" onchange="updateFont()">
					<option value="normal">Normal</option>
					<option value="bold">Bold</option>
				</select></p>
          	<p>Font Variant: 
          		<select id="fontvariant" class="fontvariant" name="fontvariant" onchange="updateFont()">
					<option value="normal">Normal</option>
					<option value="small-caps">Small Caps</option>
				</select></p>
          	<p>Text Align: 
          		<select id="textalign" class="textalign" name="textalign" onchange="updateFont()">
					<option value="left">Left</option>
					<option value="right">Right</option>
					<option value="center">Center</option>
					<option value="justify">Justify</option>
				</select></p>
          	<p>Letter Spacing: 
          		<strong class="text-info"><span id="spacing-value">-1.5</span>px</strong>
          	</p>
          		<div id="slider_spacing-value" class="slider spacing ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 42.5%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 42.5%;"></a></div>
          	<p>Line Height: 
          		<strong class="text-info"><span id="height-value">21</span>px</strong>
          	</p>
          		<div id="slider_height-value" class="slider height ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 52.5%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 52.5%;"></a></div>
        </div>
	
</div>
</div>

<div class="clear"></div>
								</section>
								<!-- End Single Page -->
						</div>
						<!-- End Content -->
					</div>
				</div>
			</div>
		</div>
		<!-- End Main -->
		<!-- Ticker -->
		
		<!-- End Ticker -->
		<!-- Footer -->
		
		<!-- End Footer -->
	</div>
	

	
	<div class="cpright" style="text-align: center;";>
Copyright © 2013 <a href="http://seowario.blogspot.com/" target="_blank" >SEOWARIO</a>
</div>


</body></html>